<template>
    <transition name="confirm-fade">
    <div class="confirm" v-show="isShow" @click.stop>
        <div class="confirm-wrapper">
            <div class="content-content">
                <div class="confirm-content">
                <p class="text" v-text="text"></p>
            </div>
                <div class="choice">
                    <div class="item cancel" @click="cancel" v-text="no"></div>
                    <div class="item clear" @click="confirm" v-text="yes"></div>
                </div>
            </div>

        </div>
    </div>
    </transition>
</template>
<script>
export default {
    name: 'confirm',
    props: {
        text: {
            type: String,
            default: '',
        },
        yes: {
            type: String,
            default: '清空',
        },
        no: {
            type: String,
            default: '取消',
        },
    },
    data() {
        return {
          isShow: false,
        };
    },
    methods: {
        show() {
            this.isShow = true;
        },
        hide() {
            this.isShow = false;
        },
        cancel() {
            this.$emit('cancel');
            this.hide();
        },
        confirm() {
            this.$emit('confirm');
            this.hide();
        },
    },
};
</script>
<style lang="stylus" scoped>
@import '~styl/var'
@import '~styl/mixin'
.confirm
    position fixed
    z-index $highest
    top 0
    left 0
    height 100%
    width 100%
    background $color-background-d
    &.confirm-fade-enter-active
        animation: confirm-fadein 0.3s
        .content-content
            animation: confirm-zoom 0.3s
    .confirm-wrapper
        center(absolute)
        .content-content
            font-size $font-size-large
            background $color-highlight-background
            border-radius 13px
            width 270px
            .confirm-content
                padding 19px 15px
                line-height 22px
                text-align center
                color $color-text-l
            .choice
                display flex
                border-top 1px solid $color-background-d
                .item
                    flex 1
                    color $color-text-d
                    padding 10px 0
                    text-align center
                    &.cancel
                        border-right 1px solid $color-background-d
@keyframes confirm-fadein
    0%
        opacity: 0
    100%
        opacity: 1

@keyframes confirm-zoom
    0%
        transform: scale(0)
    50%
        transform: scale(1.1)
    100%
        transform: scale(1)
</style>
